<template>
	<form @submit="userAddressSave">
		<cu-custom :bgColor="'bg-'+theme.backgroundColor" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">成为会员</block>
		</cu-custom>
		<view class="cu-form-group">
			<view class="title">姓名</view>
			<input class="text-right" placeholder="请输入姓名" name="userName" :value="userAddress.userName"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">联系电话</view>
			<input disabled="true" class="text-right" placeholder="请输入电话" name="telNum" :value="userAddress.telNum"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">性别</view>
			<!-- <input class="text-right" type="radio" placeholder="请输入性别" name="sex" :value="userAddress.sex"></input> -->
			<radio-group @change="radioChange">
						<label>
							<radio value="1" name="sex" /><text>男</text>
						</label>
						<label>
							<radio value="2" name="sex" /><text>女</text>
						</label>
						</radio-group>
		</view>
		<view class="cu-form-group" >
			<view class="title">地址选择</view>
			<!-- #ifndef H5 || APP-PLUS || MP-ALIPAY -->
						<picker mode="region" @change="regionChange" :value="region" >
				<view class="picker">{{region[0]}}，{{region[1]}}，{{region[2]}}</view>
			</picker>
			<!-- #endif -->
			<!-- #ifdef H5 || APP-PLUS || MP-ALIPAY -->
			<!-- 			<region-picker @change="regionChange" :value="region" >
				<view class="picker">{{region[0]}}，{{region[1]}}，{{region[2]}}</view>
			</region-picker> -->
			<!-- #endif -->
		
		</view>
		<view class="cu-form-group">
			<view class="title">住址</view>
			<input class="text-right" placeholder="请输入住址" name="address" :value="userAddress.address"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">出生年月</view>
			<view class="uni-list-cell-db">
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="uni-input">{{date}}</view>
				</picker>
			</view>
		</view>


		<view class="compile">
			<button class="cu-btn shadow-blur block margin-sm round bottom-btn" :class="'bg-'+theme.themeColor"
				formType="submit">成为会员</button>
		</view>
	</form>
</template>

<script>
	function getDate(type) {
		const date = new Date();
	
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
	
		if (type === 'start') {
			year = year - 10;
		} else if (type === 'end') {
			year = year + 10;
		}
		month = month > 9 ? month : '0' + month;;
		day = day > 9 ? day : '0' + day;
	
		return `${year}-${month}-${day}`;
	}
	const app = getApp();
	import api from 'utils/api'
	import validate from 'utils/validate'

	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				theme: app.globalData.theme, //全局颜色变量
				region: {},
				userAddress: {
					userName: '',
					telNum: '',
					sex:'',
					address: '',
					date:''
				},
				date: getDate({
					format: true
				}),
				startDate:getDate('start'),
				endDate:getDate('end'),
				region: ['选择省', '选择市', '选择区'],
				flag:false,
			};
		},
		onLoad(options) {
			// 本地获取参数信息
		},
		mounted() {
			let value = uni.getStorageSync('user_info');
			console.log(value,'我是用户信息')
			this.userAddress.telNum = value.phone
		},
		methods: {
			radioChange(e){
				this.userAddress.sex = e.detail.value
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			regionChange(e) {
			
				this.region = e.detail.value;
			},
			userAddressSave(e) {
				let value = e.detail.value;
				console.log(value.userName,'value.userName')
				console.log(value.telNum,'value.telNum')
				console.log(value.address,'value.address')
				console.log(value.sex,'value.sex')
				console.log(this.date,'value.sex')
				console.log(this.region,'地址')

				if (!value.userName) {
					uni.showToast({
						title: '请填写收货人姓名',
						icon: 'none',
						duration: 3000
					});
					return;
				}

				if (!value.telNum) {
					uni.showToast({
						title: '请填写联系电话',
						icon: 'none',
						duration: 3000
					});
					return;
				}
				if (!this.userAddress.sex) {
					uni.showToast({
						title: '请输入性别',
						icon: 'none',
						duration: 3000
					});
					return;
				}

				if (!validate.validateMobile(value.telNum)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none',
						duration: 3000
					});
					return;
				}

				if (!value.address) {
					uni.showToast({
						title: '请填写地址',
						icon: 'none',
						duration: 3000
					});
					return;
				}

				api.changeMember({
					membername:value.userName,
					mobilephone:value.telNum,
					sex:this.userAddress.sex,
					address:this.region[0] + this.region[1] + this.region[1] + value.address,
					birthday:this.date,
				}).then(res => {
					console.log(res,'我是热搜')
					uni.navigateBack({
						delta: 1
					});
				});
			},


		}
	};
</script>

<style>
	.bottom-btn {
		margin: auto;
		width: 96%;
		height: 88rpx;
		margin-bottom: 20rpx;
	}

	.compile {
		position: fixed;
		width: 100%;
		position: absolute;
		bottom: 0;
	}
</style>
